<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>Faeple</title>
    
    <link href="/resources/css/global-style.css" rel="stylesheet">
    <!--[if lt IE 9]>
		<script src="/resources/js/html5shiv.js"></script>
		<script src="/resources/js/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
    	body{
    		background-color: #F5F4F2!important;
    		color: #575A60!important;
    	}
    	.title_cover{
    		background-color: #778591;
    		width: 100%;
    		height: 180px;
    		text-align: center;
    		color: white;
			text-shadow: #444 0 1px 1px;
			font-size: 36px;
			padding-top: 55px;
			z-index:2;
    	}
    	.form-group{ position: relative; }
    	.well{ background-color:#fff!important; }
    	.form_message{ margin-top:7px;color:#D42027; }
    	.has-error label { color:#D42027; }
    	.form-control-feedback{ position:absolute;top:32px;right:10px;display:none; }
    	.has-success .form-control-feedback{display:block;}
    	.file_upload_btn {position:relative;overflow:hidden;}
    	#business-logo{ position: absolute; top: 0;right: 0;margin: 0;opacity: 0;-ms-filter: 'alpha(opacity=0)';direction: ltr;cursor: pointer;font-size: 200px;}
    	.slide_up{
    		-webkit-transform: translateY(-120%);
			-o-transform: translateY(-120%);
			-moz-transform: translateY(-120%);
		    transform: translateY(-120%);
		    z-index:1;
    	}
    	.slide{
    		-webkit-transition:all 1s;
			-o-transition:all 1s;
			-moz-transition:all 1s;
			transition:all 1s;
    	}
    </style>
</head>

<body>
<div id="viewport">
<div id="page">
<!-- header -->
<%@ include file="head.jsp" %>
<!-- header -->
<div class="title_cover">
Faeple 비즈니스 계정 만들기
</div>
<div class="container" style="margin-bottom:50px;overflow:hidden;position:relative;">
	<form method="post" id="business-form">
	<div class="col-md-8 col-md-offset-2">
		<div class="well slide" style="border-top-left-radius:0;border-top-right-radius:0;border-top:0;" id="sign-form-wrapper">
			<h4>로그인 정보</h4>
			<hr>
			<div class="form-group" style="margin-top: 25px;">
				<label for="business-email"><spring:message code="sign.email"/></label>
				<input type="text" class="form-control" id="business-email" name="business-email" title="<spring:message code="sign.email"/>" placeholder="<spring:message code="sign.email_ph"/>"  maxlength="45" tabindex="1" onblur="checkValidate(this.id);">
				<span class="form-control-feedback" aria-hidden="true"><i class="glyphicon glyphicon-ok"></i></span>
				<div id="business-email-message" class="form_message"></div>
			</div>
			<div class="form-group">
				<label for="business-password"><spring:message code="sign.passwd"/></label>
				<input type="password" class="form-control" id="business-password" name="business-password" title="<spring:message code="sign.passwd"/>" placeholder="<spring:message code="sign.passwd_ph"/>" onblur="checkValidate(this.id);" maxlength="20" tabindex="2" style="ime-mode:disabled;">
				<span class="form-control-feedback" aria-hidden="true"><i class="glyphicon glyphicon-ok"></i></span>
				<div id="business-password-message" class="form_message"></div>
			</div>
			<div class="form-group">
				<label for="business-id">아이디</label>
				<div class="input-group">
					<span class="input-group-addon">faeple.com/</span>
					<input type="text" class="form-control" id="business-id" name="business-id" placeholder="아이디" onkeyup="checkId(this.value);" maxlength="16" data-toggle="tooltip" title="영문과 숫자만, 16글자이내" style="ime-mode:disabled;" data-toggle="tooltip" tabindex="3">
					<span class="form-control-feedback" aria-hidden="true" style="top:6px;"><i class="glyphicon glyphicon-ok"></i></span>
					<img src="/resources/img/loading-15x15-white.gif" id="id-search-loading" style="position:absolute;top:10px;right:5px;display:none;">
				</div>
				<div id="business-id-message" class="form_message"></div>
			</div>
			<div class="form-group">
				<div class="radio-inline" style="padding-left:0;">
					<label title="<spring:message code="common.female"/>"><input type="radio" name="business-gender" id="business-gender" value="female" tabindex="4"><span style="margin-left:6px;"><spring:message code="common.female"/></span></label>
				</div>
				<div class="radio-inline" style="padding-left:0;">
					<label title="<spring:message code="common.male"/>"><input type="radio" name="business-gender" id="business-gender" value="male" tabindex="5"><span style="margin-left:6px;"><spring:message code="common.male"/></span></label>
				</div>
				<div id="business-gender-message" class="form_message"></div>
			</div>
			<br>
			<h4>비즈니스 정보</h4>
			<hr>
			<div class="form-group">
		 		<label for="business-name">사업체 이름</label>
				<input type="text" class="form-control" id="business-name" name="business-name" title="사업체 이름" placeholder="사업체 이름" onblur="checkValidate(this.id);" maxlength="30" tabindex="6">
				<span class="form-control-feedback" aria-hidden="true"><i class="glyphicon glyphicon-ok"></i></span>
				<div id="business-name-message" class="form_message"></div>
			</div>
			<div class="form-group" style="margin-top: 25px;">
				<label for="business-category">사업체 유형</label>
				<select class="form-control" tabindex="7" id="business-category" name="business-category">
					<option value="none">사업체 유형 선택</option>
					<option value="w_cloth_s">여성 의류쇼핑몰</option>
					<option value="w_acc_s">여성 패션잡화쇼핑몰</option>
					<option value="w_all_s">여성 패션종합쇼핑몰</option>
					<option value="w_cloth_m">여성 의류마켓</option>
					<option value="w_acc_m">여성 패션잡화마켓</option>
					<option value="w_all_m">여성 패션종합마켓</option>
					<option value="w_beauty">여성 뷰티몰</option>
					<option value="m_cloth_s">남성 의류쇼핑몰</option>
					<option value="m_acc_s">남성 패션잡화쇼핑몰</option>
					<option value="m_all_s">남성 패션종합쇼핑몰</option>
					<option value="m_cloth_m">남성 의류마켓</option>
					<option value="m_acc_m">남성 패션잡화마켓</option>
					<option value="m_all_m">남성 패션종합마켓</option>
					<option value="m_beauty">남성 뷰티몰</option>
				</select>
				<div id="business-category-message" class="form_message"></div>
			</div>
			<div class="form-group" style="margin-top: 25px;">
				<label for="business-description">소개</label>
				<textarea rows="3" class="form-control" id="business-description" name="business-description" maxlength="120" style="resize:vertical;" placeholder="120자 이내로 소개해주세요" tabindex="8"></textarea>
			</div>
			<div class="form-group" style="margin-top: 25px;">
				<label for="business-website">웹사이트</label>
				<input type="text" class="form-control" id="business-website" name="business-website" title="웹사이트 주소" placeholder="웹사이트 주소를 입력해 주세요"  maxlength="80" tabindex="9" onblur="checkValidate(this.id);">
				<span class="form-control-feedback" aria-hidden="true"><i class="glyphicon glyphicon-ok"></i></span>
				<div id="business-website-message" class="form_message"></div>
			</div>
			<!-- <div class="form-group" style="margin-top: 25px;">
				<label for="inputEmail">로고</label><br>
				<span class="file_upload_btn btn btn-default" tabindex="10">
					<span>찾아보기</span>
					<input type="file" id="business-logo" name="business-logo" accept="image/*">
				</span>
				<span id="file-name" style="margin-left:15px;"></span>
			</div> -->
			<button class="btn btn-primary btn-block btn-lg" type="button" style="margin-top:30px; border-radius:2px; box-shadow: 0 2px 0 0 #1783D3;border:0;" tabindex="11" onclick="signup(this)">계정 만들기</button>
			<div style="margin:10px 0;font-size:13px;">계정 만들기 버튼을 누름으로써 Faeple의 <a href="/terms" target="blank"><strong>서비스 약관</strong></a> 및 <a href="/privacy" target="blank"><strong>개인정보 보호 정책</strong></a>에 동의하는 것으로 간주됩니다.</div>
		</div>
	</div>
	</form>
	<div class="clearfix"></div>
	<div style="width:100%;text-align:center;display:none;margin-top:60px;" id="complete-message">
		<i class="ion-checkmark-circled" style="font-size:50px; color: #7a7a7a;"></i>
		<h4 style='font-weight: bold; color:#777; text-shadow:0 1px 1px rgba(255,255,255,.8);'>계정이 생성되었습니다</h4>
<!-- 		<h5 style="margin-top:25px;color:#999; text-shadow:0 1px 1px rgba(255,255,255,.8);font-weight:bold;">시작하기 버튼을 눌러 패플을 시작합니다.</h5> -->
		<a href="/" class="btn btn-success" style="margin-top:20px;">시작하기</a>
	</div>
</div>
<div class="container">
	
</div>
</div><!-- end page -->
<%@ include file="commonScript.jsp" %>
</div><!-- end viewport -->
<script type="text/javascript">
	var check = true;
	var check1 = false;
	var check2 = false;
	var check3 = false;
	var check4 = false;
	var check5 = false;
	var check6 = false;
	var check7 = false;

	function signup(btn){
		if($("#business-email").val() == ""){
			$("#business-email").parent().addClass("has-error");
			$("#business-email-message").html("이메일을 입력해 주세요");
			check1 = false;
		}
		if($("#business-password").val() == ""){
			$("#business-password").parent().addClass("has-error");
			$("#business-password-message").html("비밀번호를 입력해 주세요");
			check2 = false;
		}
		if($("#business-id").val() == ""){
			$("#business-id").parent().addClass("has-error");
			$("#business-id-message").html("아이디를 입력해 주세요");
			check3 = false;
		}
		if(!$("input:radio[id='business-gender']").is(":checked")){
			check4 = false;
			$("#business-gender-message").html("성별을 선택해 주세요");
		}else{
			$("#business-gender-message").empty();
			check4 = true;
		}
		if($("#business-name").val() == ""){
			$("#business-name").parent().addClass("has-error");
			$("#business-name-message").html("사업체 이름을 입력해 주세요");
			check5 = false;
		}
		if($("#business-category").val() == "none"){
			$("#business-category").parent().addClass("has-error");
			$("#business-category-message").html("사업체 유형을 선택해 주세요");
			check6 = false;
		}else{
			$("#business-category").parent().removeClass("has-error");
			$("#business-category-message").empty();
			check6 = true;
		}
		if($("#business-website").val() == ""){
			$("#business-website").parent().addClass("has-error");
			$("#business-website-message").html("웹사이트 주소를 입력해 주세요");
			check7 = false;
		}else{
			check7 = true;
			$("#business-website-message").empty();
		}
		
		if(check1&&check2&&check3&&check4&&check5&&check6&&check7){
			$(btn).attr("disabled","disabled").html("가입중...");
			$.ajax({
			    type : "post"
			    , url : "/businessAccountRegist"
			    , data : $("#business-form").serialize()
			    , dataType : "text"
			    , timeout : 5000
			    , error : function(request, status, error) {
			    	
			    }
			    , success : function(response) {
			    	if(response == "execute"){
			    		$("#sign-form-wrapper").addClass("slide_up");
			    		setTimeout(function(){
			    			$("#sign-form-wrapper").hide();
			    			$("#complete-message").fadeIn();
			    		},1000);
			    	}else{
			    		
			    	}
			    }
			    , beforeSend: function() {
			    	
			    }
			    , complete: function(){
			    	$(btn).removeAttr("disabled").html("계정 만들기");
			    }
			});
		}
	}
	
	function checkValidate(id){
		if(id == "business-email"){
			if($("#"+id).val() != ""){
				eCheck=/^[_a-zA-Z0-9]+([-+.][_a-zA-Z0-9]+)*@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/i;
				if(eCheck.test($("#business-email").val())){
					var data = "email="+$("#business-email").val();
					$.ajax({
					    type : "get"
					    , url : "/checkEmail"
					    , data : data
					    , dataType : "text"
					    , timeout : 5000
					    , error : function(request, status, error) {
					    	
					    }
					    , success : function(response) {
					    	if(response == "true"){
					    		$("#business-email").parent().removeClass("has-error").addClass("has-success");
					    		$("#business-email-message").empty();
					    		check1 = true;
					    	}else{
					    		$("#business-email").parent().addClass("has-error");
								$("#business-email-message").html("이미 존재하는 이메일 입니다");
								check1 = false;
					    	}
					    }
					    , beforeSend: function() {
					    	$("#business-email-message").html("<img src='/resources/img/ajax-loader3.gif'>");
					    }
					});
				}else{
					$("#business-email").parent().addClass("has-error");
					$("#business-email-message").html("<spring:message code='sign.email_err3' javaScriptEscape='true'/>");
					check1 = false;
				}
			}
		}else if(id == "business-password"){
			if($("#"+id).val() != ""){
				if($("#"+id).val().length < 6){
					$("#business-password").parent().addClass("has-error");
					$("#business-password-message").html("비밀번호를 6자 이상으로 입력해 주세요");
					check2 = false;
				}else{
					$("#business-password").parent().removeClass("has-error").addClass("has-success");
		    		$("#business-password-message").empty();
		    		check2 = true;
				}
			}
			
		}else if(id =="business-name"){
			if($("#"+id).val() != ""){
				$("#business-name").parent().removeClass("has-error").addClass("has-success");
	    		$("#business-name-message").empty();
	    		check5 = true;
			}
		}else if(id =="business-website"){
			if($("#"+id).val() != ""){
				$("#business-website").parent().removeClass("has-error").addClass("has-success");
	    		$("#business-website-message").empty();
	    		check7 = true;
			}
		}
	}
	
	function checkId(id){
		if(id.length < 4){
			$("#business-id").parent().addClass("has-error");
			$("#business-id-message").html("<spring:message code='sign.id_err3' javaScriptEscape='true'/>");
			check3 = false;
		}else{
			$.ajax({
			    type : "get"
			    , url : "/checkId?id="+id
			    , dataType : "text"
			    , timeout : 5000
			    , error : function(request, status, error) {
			    	
			    }
			    , success : function(response) {
			    	if(response == "true"){
			    		$("#business-id").parent().removeClass("has-error").addClass("has-success");
			    		$("#business-id-message").empty();
			    		check3 = true;
			    	}else{
			    		$("#business-id").parent().removeClass("has-success").addClass("has-error");
			    		$("#business-id-message").html("<spring:message code='sign.id_err2' javaScriptEscape='true'/>");
			    		check3 = false;
			    	}
			    }
			    , beforeSend: function() {
			    	$("#id-search-loading").show();
			    }
			    , complete : function(){
			    	$("#id-search-loading").hide();
			    }
			});
		}
	}

	$("body").tooltip({
	    selector: '[data-toggle="tooltip"]',
	    'placement': 'top',
	    'container': 'body',
	    'trigger': "hover"
	});

	$(function(){
		if("${userDto.group_type}" == "seller"){
			alert("이미 비즈니스 계정입니다.");
			history.back();
		}
		$("#business-logo").change(function() {
	        $("#file-name").html($(this).val().split('/').pop().split('\\').pop());
	        
	    });
		$("#business-category").change(function(){
			if($(this).val() != "none"){
				$("#business-category").parent().removeClass("has-error");
				$("#business-category-message").html("");
			}
		});
	});
</script>
</body>
</html>